﻿<!DOCTYPE html>
<html lang="ch">

<head>
	<meta charset="utf-8" />
	<title>缘来是你</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta name="description" content="">
	<meta name="keywords" content="" />
	<meta name="author" content="">
	<meta name="MobileOptimized" content="320" />
	<!--srart theme style -->
	<link rel="stylesheet" type="text/css" href="/css/animate.css">
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
	<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css">
	<link rel="stylesheet" type="text/css" href="/css/magnific-popup.css">
	<link rel="stylesheet" type="text/css" href="/css/fonts.css">
	<link rel="stylesheet" type="text/css" href="/css/style.css">
	<link rel="stylesheet" type="text/css" href="/css/llg/login.css">
	<!-- tools -->
	<script src="/js/tools/tool.js"></script>
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Axios -->
	<script src="/js/axios-0.18.0.js"></script>
	<!-- JQuery -->
	<script type="text/javascript" src="/js/jquery.js"></script>
	<style>
		@keyframes l2r {
			0% {
				left: 45%;
			}
			50% {
				left: 55%;
			}
			100% {
				left: 45%;
			}
		}
	</style>
</head>

<body style="overflow: hidden;">



	<!-- preloader Start -->
	<div class="llg-main-container" style="overflow: hidden;">
		<div id="preloader">
			<div id="status"><img src="/images/header/preloader.gif" id="preloader_image" alt="loader">
			</div>
		</div>
		<!-- Header Wrapper Start -->
		<div section-scroll='0' class="wd_scroll_wrap">
			<div class="wd_slider_wrapper wd_single_index_menu">
				<div id="snow"></div>
				<div class="menu_fixed animated fadeInDown" style="width: 100vw;">
					<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
						<div class="wd_logo">
							<img src="/images/header/logo.png" alt="Logo" title="Logo" class="img-responsive">
							<button class="wd_menu_btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
						</div>
					</div>
					<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
						<div class="wd_mainmenu_wrapper">
							<div class="wd_main_menu_wrapper">
								<div class="wd_main_menu wd_single_index_menu">
									<ul>
										<li><a href="#">欢迎登录</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 左侧文字 -->
				<div class="wd_slider_textinfo">
					<img src="/images/header/name.png" alt="Slider Image" class="img-responsive">
					<h3>20 may 2018</h3>
					<h1>Save The Date</h1>
					<div class="clearfix"></div>
					<img src="/images/content/heading.png" alt="Heading" class="img-responsive">
				</div>
			</div>
		</div>

		<!-- 登录、注册表单 -->
		<div id="loginApp" class="llg-form-container">
			<div class="wd_guest_formbox">
				<span>缘，妙不可言</span>
				<h4>Rsvp Here!</h4>
				<div class="wd_guest_form">
					<div class="row">
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<label>Telephone :</label>
							<input class="llg-btn-hover" type="text" v-model="loginData.telephone">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
							<label>SMS Code :</label>
							<input class="llg-btn-hover" type="text" v-model="loginData.code">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
							<!-- <button>获取验证码</button> -->
							<label>&nbsp;</label>
							<button class="llg-btn-sms llg-btn-hover" type="button" @click="getSMSCode()">
								<span v-if="interval==0">Get code</span>
                                <span v-if="interval!=0">Retry After {{interval}}s</span>
							</button>
						</div>
						<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
							<div class="wd_btn">
								<a href="javascript:void(0);" @click="login()">I am attending</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="llg-message-box">
				{{msg}}
			</div>
		</div>
		<script>
			var loginApp = new Vue({
				el: "#loginApp",
				data: {
					loginData: {
						telephone: '',
						code: ''
					},
					msg: '',// 错误信息提示
					logStatus: false,// 判断登录状态
					from: '/api/web/search.html',// 默认跳转页面
					interval: 0
				},
				mounted() {
					let from = getUrlParam('from');
					if (from) {
						this.from = from;
					}
					this.checkLogged();
				},
				methods: {
					// 请求登录、注册
					login() {
						console.log('try to login');
						if (this.isTelephoneOK() && this.isSMSCodeOK()) {
							axios.post('/api/oauth/login', this.loginData).then(res => {
								if (res.data.flag) {
									this.showMessage(res.data.message);
									setCookie('id',res.data.data.id);
									setCookie('jti',res.data.data.uid);
									setCookie('username',res.data.data.username);
									console.log('status : ' + res.data.data.status);
									if (res.data.data.status == '0') {
										// 完善基本信息
										this.changeForm();
									} else {
										// 登录、注册成功后跳转页面
										this.redirect();
									}
								} else {
									console.log('登录失败');
									this.showMessage(res.data.message);
								}
							}).catch(error => {
								this.showMessage('服务器正忙，请重试');
							});
						}
					},
					// 获取当前登录状态
					checkLogged() {
						let id = getCookie('id');
						if (!id) {
							return;
						}
						axios.get('/api/customer/check/').then(res => {
							if (res.data.flag) {
								switch (res.data.data) {
									case 0:
									// 已注册、未完善信息
										console.log('login status : 0');
										this.changeForm();
										break;
									case 1:
										console.log('login status : 1');
									// 普通会员，已完善信息
										this.redirect();
										break;
									case 2:
									// VIP会员
										console.log('login status : 2');
										this.redirect();
										break;
									default:
									// 未登录
										console.log('login status : null');
										break;
								}
							} else {
								this.showMessage(res.data.message);
							}
						});
					},
					// 请求短信验证码
					getSMSCode() {
						if (this.interval != 0) {
							return;
						}
						if (this.isTelephoneOK()) {
							this.interval = 60;
							let timer = setInterval(() => {
								this.interval--;
								if (this.interval <= 0) {
									this.interval = 0;
									clearInterval(timer);
								}
							}, 1000);
							axios.get('/api/code/getRegisterCode/' + this.loginData.telephone).then(res => {
								if (res.data.flag) {
									this.showMessage('验证码发送成功');
								} else {
									this.showMessage(res.data.message);
								}
							});
						}
					},
					// 校验参数
					isTelephoneOK() {
						let flag = new RegExp("^1[0-9]{10}$").test(this.loginData.telephone);
						if (!flag) {
							this.showMessage('手机号格式错误！');
						}
						return flag;
					},
					isSMSCodeOK() {
						let flag = new RegExp("^.{4}$").test(this.loginData.code);
						if (!flag) {
							this.showMessage('验证码格式错误');
						}
						return flag;
					},
					// 跳转登录前页面
					redirect() {
						if (this.from) {
							setTimeout(() => {
								location.href = this.from;
							}, 2000);
						}
					},
					// 消息框
					showMessage(message) {
						if (!message) {
							return;
						}
						this.msg = message;
						$(".llg-message-box").addClass('start');
						setTimeout(() => {
							$(".llg-message-box").removeClass('start');
						}, 3000);
					},
					// 切换表单
					changeForm() {
						setTimeout(() => {
							$("#loginApp").fadeOut(500);
							$("#infoApp").fadeIn(500);
						}, 2500);
					}
				}
				
			});
		</script>

		<!-- 完善基本信息表单 -->
		<div id="infoApp" class="llg-info-container llg-row" style="border: 1px solid #ecf0f1;display: none;">
			<div class="llg-9 llg-row">
				<div class="llg-6 llg-col" style="padding: 40px;margin: 20px;">
					<!-- nick -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">昵称：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.nick">
						</div>
					</div>
					<!-- age -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">年龄：{{infoData.age}}岁</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="range" class="form-control-range" v-model="infoData.age" min="18">
						</div>
					</div>
					<!-- sex -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">性别：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.sex">
						</div>
					</div>
					<!-- height -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">身高：{{infoData.height}}cm</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="range" class="form-control-range" v-model="infoData.height" min="100" max="220">
						</div>
					</div>
					<!-- weight -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">体重：{{infoData.weight}}kg</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="range" class="form-control-range" v-model="infoData.weight" min="0" max="200">
						</div>
					</div>
					<!-- address -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">住址：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.address">
						</div>
					</div>
					<!-- nation -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">民族：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.nation">
						</div>
					</div>
				</div>
				<div class="llg-6 llg-col" style="padding: 40px;margin: 20px;">
					<!-- marital_status -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">婚姻状态：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<select class="form-control" v-model="infoData.marital_status">
								<option value="">保密</option>
								<option value="未婚">未婚</option>
								<option value="离异">离异</option>
								<option value="丧偶">丧偶</option>
							  </select>
						</div>
					</div>
					<!-- education -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">学历：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<select class="form-control" v-model="infoData.education">
								<option value="">保密</option>
								<option value="双学士">双学士</option>
								<option value="硕士">硕士</option>
								<option value="博士">博士</option>
								<option value="本科">本科</option>
								<option value="大专">大专</option>
								<option value="高中中专及以下">高中中专及以下</option>
							  </select>
						</div>
					</div>
					<!-- salary -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">月薪：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.salary">
						</div>
					</div>
					<!-- children -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">子女情况：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<select class="form-control" v-model="infoData.children">
								<option value="">保密</option>
								<option value="没有孩子">没有孩子</option>
								<option value="有孩子跟着自己">有孩子跟着自己</option>
								<option value="有孩子但已经独立">有孩子但已经独立</option>
								<option value="有孩子跟着对方">有孩子跟着对方</option>
							  </select>
						</div>
					</div>
					<!-- suggest -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">爱情宣言：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.suggest">
						</div>
					</div>
					<!-- favorite -->
					<div class="llg-3 llg-row llg-center-y">
						<div class="llg-4 llg-center-y">
							<h3 style="line-height: 0.1;">兴趣爱好：</h3>
						</div>
						<div class="llg-5 llg-center-y">
							<input type="text" class="form-control" v-model="infoData.favorite">
						</div>
					</div>
				</div>
			</div>
			<div class="llg-3 llg-center" style="position: relative;">
				<svg @click="sendBaseInfo()" class="bi bi-chevron-double-right llg-l2r"
				style="
					position: absolute;
					cursor: pointer;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					animation: l2r ease-in-out 2s infinite;"
				 width="10em" height="10em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
					<path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
				  </svg>
			</div>
		</div>
		<script>
			var infoApp = new Vue({
				el: '#infoApp',
				data: {
					infoData: {
						id: '',
						nick: '',
						age: '18',
						sex: '',
						height: '175',
						weight: '60',
						address: '',
						nation: '',
						marital_status: '',
						education: '',
						salary: '',
						children: '',
						suggest: '',
						favorite: ''
					}
				},
				methods: {
					sendBaseInfo() {
						this.infoData.id = getCookie('id');
						console.log('id : ' + this.infoData.id);
						console.log('id : ' + getCookie('id'));
						console.log('jti : ' + getCookie('jti'));
						console.log('username : ' + getCookie('username'));
						axios.post('/api/customer/registerSeniorMember', this.infoData).then(res => {
							if (res.data.flag) {
								loginApp.showMessage(res.data.message);
								this.moveOut();
								// 成功完善信息，跳转页面
								setTimeout(() => {
									loginApp.redirect();
								}, 500);
							} else {
								loginApp.showMessage(res.data.message);
							}
						}).catch(error => {
							loginApp.showMessage("基本信息添加失败");
						});
					},
					moveOut() {
						$("#infoApp").addClass('start');
					}
				}
			});
		</script>

	</div>

	<script type="text/javascript" src="/js/bootstrap.js"></script>
	<script type="text/javascript" src="/js/smoothscroll.js"></script>
	<script type="text/javascript" src="/js/owl.carousel.js"></script>
	<script type="text/javascript" src="/js/modernizr.js"></script>
	<script type="text/javascript" src="/js/jquery.magnific-popup.js"></script>
	<script type="text/javascript" src="/js/wow.js"></script>
	<script type="text/javascript" src="/js/custom.js"></script>
	<script>
		$(window).on("load", function () {
			var wow = new WOW({
				boxClass: 'wow',
				animateClass: 'animated',
				offset: 0,
				mobile: true,
				live: true
			});
			wow.init();
		});
	</script>
</body>

</html>